<template>
  <div class="login-wrapper">
    <div class="model">
      <div class="model__svg">
        <img
          src="https://iconfont.alicdn.com/t/afd9e5b4-2793-40a6-869f-30e123395a54.png"
          alt="插画"
        />
      </div>
      <div class="model__from">
        <el-form ref="userFrom" :model="user" status-icon :rules="rules">
          <h1 class="model__from__title">欢迎登录PBA后台管理系统</h1>
          <el-form-item prop="userName">
            <el-input
              type="text"
              class="model__from__user"
              prefix-icon="el-icon-user"
              clearable="true"
              v-model="user.userName"
            />
          </el-form-item>
          <el-form-item prop="userPwd">
            <el-input
              type="password"
              class="model__from__password"
              prefix-icon="el-icon-lock"
              show-password
              v-model="user.userPwd"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              round
              class="login-btn"
              @click="loginClick"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import storage from '@/utils/storage';
import utils from '@/utils/utils'
export default {
  data () {
    return {
      user: {
        userName: "",
        userPwd: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        userPwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    loginClick () {
      this.$refs.userFrom.validate(valid => {
        if (valid) {
          this.$api.login(this.user).then(async res => {
            this.$store.commit('saveUserInfo', res)
            // await this.loadAsyncRouter()
            this.$router.push('/welcome')
            location.href = '/'
          })
        } else {
          return false;
        }
      })
    },
    /**
     * @动态加载路由 :由于傻逼vite的问题,终端可能代码报错，但不影响使用
     */
    // async loadAsyncRouter () {
    //   let userInfo = storage.getItem('userInfo') || {}
    //   if (userInfo.token) {
    //     try {
    //       const { menuList } = await this.$api.getPermissionList()
    //       let routers = utils.generateRouter(menuList)
    //       routers.map((item) => {
    //         item.component = item.component = (function importLocale (locale) {
    //           return import(`../views/${locale.name}.vue`)
    //         })(item)
    //       })
    //     } catch (error) { }
    //   }
    // }
  },
}
</script>

<style lang="scss" scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #6e5bd9;
}

.model {
  width: 8rem;
  height: 5.35rem;
  background: #ffffff;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  &__svg {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
  }
  &__from {
    flex: 1;
    position: relative;
    padding: 0.5rem 0;
    &__title {
      font-size: 0.25rem;
      font-weight: bold;
    }
    &__user {
      margin-top: 0.5rem;
    }
    &__password {
      margin: 0.2rem 0 0.2rem 0;
    }
  }
}

.login-btn {
  background: #725cff;
  border: none;
  width: 100%;
}
</style>